import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PreviewPage } from '../preview/preview';
import { Toast } from '@ionic-native/toast';

declare var $ :any
/**
 * Generated class for the SetSizeComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'page-setSize',
  templateUrl: 'setSize.html'
})

export class SetSizePage {
  private img: any;
  
  private sizes = [
                    {'w': 1125,'h': 2001, 'checked': false},
                    {'w': 1080,'h': 1920, 'checked': false},
                    {'w': 750,'h': 1134, 'checked': false},
                    {'w': 720,'h': 1286, 'checked': false},
                    {'w': 480,'h': 800, 'checked': false},
                    {'w': 200,'h': 100, 'checked': false},
                  ]
  private customSize = {'w': 0,'h': 0,'checked': false}
  constructor(public navCtrl: NavController,
              private navParams: NavParams,
              private toast: Toast) {
    
  }

  ionViewDidEnter(){
    var image = $('#bg-pic-1')[0];
    image.src = this.navParams.data.pic;
    this.img = $('#bg-pic-1'); 
    this.img.cropper('destroy');
  }

  /**
   * 预览图片
   * 
   * @memberof SetSizePage
   */
  onShowSetSize() {
    var w :number,
        h :number;
    
    if(this.customSize.checked == true) {
      if(this.customSize.w > 0 && this.customSize.w <= 3000 && this.customSize.h > 0 && this.customSize.h <=3000) {
        w = this.customSize.w;
        h = this.customSize.h;
      }else {
        this.toast.show('请输入您想要的宽高,注意：>0且<3000','3000','center').subscribe();
      }
    }else{
      this.sizes.forEach(element => {
        if(element.checked == true){
          w = element.w;
          h = element.h;
        }
      });
    }
    if(w > 0 && h > 0){
      $('.edit-1').width(w);
      $('.edit-1').height(h);
      console.log("w & h",w,h);
      this.img.cropper('reset');
      setTimeout(() => {
        // var img_w = this.img.cropper('getImageData').naturalWidth;
        // var img_h = this.img.cropper('getImageData').naturalHeight;
        // console.log('naturalWidth ',img_w,img_h);
        this.img.cropper('setCropBoxData',{left: 0, top: 0, width: w, height: h});   
        // this.img.cropper('setCanvasData',{left: (w-img_w)/2, top: (h-img_h)/2, width: img_w, height: img_h});
        this.img.cropper('zoomTo',1);
        var result = this.img.cropper('getCroppedCanvas',{
          fillColor:"#fff",
          maxHeight:4096,
          maxWidth:4096});
        console.log('getCroppedCanvas result',result);
          this.navCtrl.push(PreviewPage,
            { 'result':result,
              'database':this.navParams.data.database,
              'albumname': this.navParams.data.albumname }
          )
      }, 100);
    }
  }
  /**
   * 选择自定义尺寸
   * 
   * @memberof SetSizePage
   */
  onChoosedCustomeSize() {
    this.customSize.checked = true;
    console.log('custome: ',this.customSize);
    this.sizes.forEach((element) => {
      element.checked = false;
    });
  }

  /**
   * 选择尺寸
   * 
   * @param {any} i 
   * @memberof SetSizeComponent
   */
  onChooseSize(i) {
    this.sizes.forEach((element, index) => {
      element.checked = false;
      if(index === i) {
        element.checked = true;
        console.log('element: ',element);
      }
    });
    this.customSize.checked = false;
  }
  
  /**
   * 获取自定义宽
   * 
   * @param {any} w 
   * @memberof SetSizeComponent
   */
  onKeyW(w) {
    this.customSize.w = parseInt(w);
  }

  /**
   * 获取自定义高
   * 
   * @param {any} h 
   * @memberof SetSizeComponent
   */
  onKeyH(h) {
    this.customSize.h = parseInt(h);
  }

  goback(){
      this.navCtrl.pop();
  }
}
